<template>
  <div class="loginbox">
    <div class="box-log">
      <h2 class="title-log">用户登录</h2>
      <form @submit.prevent="login">
        <div class="input">
          <input
            type="text"
            id="username"
            v-model="username"
            placeholder="请输入账号..."
            required
          />

        </div>
        <div class="input">
          <input
            type="password"
            id="password"
            v-model="password"
            placeholder="请输入密码..."
            required
          />
        </div>
        <button type="submit">登录</button>
      </form>
    </div>
  </div>
</template>
  
  <script>
import { useUserStore } from "../store.js";
import { defineComponent } from "vue";

export default defineComponent({
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    login() {
      const user = { username: this.username }; // 模拟登录成功后获取的用户信息
      useUserStore().login(user);
      this.$router.push("/home");
    },
  },
});
</script>

  <style>
.loginbox {
  width: 100%;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box-log {
  width: 50%;
  border: 4px solid pink;
  padding: 20px 20px;
  color: rgb(255, 132, 153);
}
.title-log {
  margin: 10px auto;
  width: 100%;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
}
.box-log form {
  width: 100%;
  text-align: center;
}
.box-log .input {
  margin: 20px 0;
}
.box-log input {
  font-size: 1rem;
}
/* .box-logn button {
        border: 0;
        outline: none;
        background-color:transparent;
    } */
.box-log button {
  padding: 8px 30px;
  background-color: rgba(249, 189, 199, 0.209);
  border: 1px solid pink;
  color: rgb(244, 109, 131);
  border-radius: 5px;
}

.box-log button:hover {
  background-color: rgb(252, 81, 109);
  color: #fff;
}

@media (max-width: 500px) {
  .loginbox {
    height: 60vh;
  }
  .box-log {
    width: 98%;
    border: none;
  }
}
</style>